<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Administrator</title>
</head>

<body>


<style>
body{
	margin:0;
	background-color:#20377a;
	background-image:url(assets/images/bg_login.jpg);
	background-repeat:no-repeat;
	
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	
}
.container{
	width:50%;
	height:300px;
	
	background-color:#1f79ac; 
	background-color:rgba(0,117,184, 0.5); 

	border:1px solid #2d83e4;
	/* for IE */
	/* filter:alpha(opacity=60); */
	/* CSS3 standard */
	background-opacity:0.5;
  
	margin:0 auto;
	margin-top:80px;
	font-family: 'Lucida Grande',verdana,arial,helvetica,sans-serif;
	font-size:12px;
	
	-moz-border-radius: 8px; 
	-webkit-border-radius: 8px;
	border-radius:8px;
	
	-moz-box-shadow: 0px 0px 4px #333;
	-webkit-box-shadow: 0px 0px 4px #333;
	box-shadow: 0px 0px 4px #333;

	overflow:hidden;
}
.container .border_top{
	width:100%;
	height:25px;
	background-color:#00527c;
	opacity:0.9;
	
	padding-top:6px;
	text-indent:10px;
	color:#fff;
	font-size:13px;
	font-weight:bold;
	
	moz-border-top-left-radius: 8px; 
	-webkit-border-top-right-radius: 8px;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
	
	background: -moz-linear-gradient(100% 100% 90deg, #00527c, #0e72a5); 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0e72a5), to(#00527c)); 
	background: -webkit-linear-gradient(#0e72a5, #00527c); 
	background: -o-linear-gradient(#0e72a5, #00527c);
}

.container .center{
	width:100%;
	height:90%;
	font-size:15px;
}

.container .border_bottom{
	width:100%;
	height:25px;
	background-color:#00527c;
	opacity:0.9;
	
	moz-border-top-left-radius: 8px; 
	-webkit-border-top-right-radius: 8px;
	border-top-left-radius:8px;
	border-top-right-radius:8px;

}
.form{
	width:100%;
	height:100%;
	margin:0 auto;
	
}

input[type='text'], input[type='password']{
	border:1px solid #fff;
	border-collapse:collapse;
	background-color:#fff;
	padding:3px;
	color:#f00;
	font-size:14px;
	
	/* Firefox 3.6+ */ 
	background: -moz-linear-gradient(100% 100% 90deg, #fff, #f5f5f5); 
	/* Safari 4-5, Chrome 1-9 */ 
	/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f5f5f5), to(#fff)); 
	/* Safari 5.1+, Chrome 10+ */
	 background: -webkit-linear-gradient(#f5f5f5, #fff); 
	/* Opera 11.10+ */ 
	background: -o-linear-gradient(#f5f5f5, #fff);
}

input[type='text']:focus, input[type='password']:focus{
	border:1px solid #fff;
	border-collapse:collapse;
	background-color:#fff;
	padding:3px;
	color:#f00;
	font-size:14px;
}

.btn_dangnhap{
	border:1px solid #009ffa;
	background:#ddd;
	padding:5px 10px 7px 10px;
	
	color:#fff;
	font-weight:bold;
	
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	border-radius:5px;
	
	-moz-box-shadow: 0px 0px 2px #555;
	-webkit-box-shadow: 0px 0px 2px #555;
	box-shadow: 0px 0px 2px #555;
	cursor:pointer;
	
	background-color:#009ffa;
	
	/* Firefox 3.6+ */ 
	background: -moz-linear-gradient(100% 100% 90deg, #006aca, #009ffa); 
	/* Safari 4-5, Chrome 1-9 */ 
	/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#009ffa), to(#006aca)); 
	/* Safari 5.1+, Chrome 10+ */
	 background: -webkit-linear-gradient(#009ffa, #006aca); 
	/* Opera 11.10+ */ 
	background: -o-linear-gradient(#009ffa, #006aca);
}

.btn_dangnhap:hover{
	border:1px solid #ffad77;
	background:#ddd;
	padding:5px 10px 7px 10px;
	color:#fff;
	font-weight:bold;
	
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	border-radius:5px;
	
	-moz-box-shadow: 0px 0px 2px #555;
	-webkit-box-shadow: 0px 0px 2px #555;
	box-shadow: 0px 0px 2px #555;
	cursor:pointer;
	
	background-color:#ff6600;
	
	/* Firefox 3.6+ */ 
	background: -moz-linear-gradient(100% 100% 90deg, #ff5b01, #ffad77); 
	/* Safari 4-5, Chrome 1-9 */ 
	/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffad77), to(#ff5b01)); 
	/* Safari 5.1+, Chrome 10+ */
	 background: -webkit-linear-gradient(#ffad77, #ff5b01); 
	/* Opera 11.10+ */ 
	background: -o-linear-gradient(#ffad77, #ff5b01);
}

</style>

<div class="container">
	<div class="border_top">
    	<table cellpadding="0" cellspacing="0" width="100%">
        <tr>
        	<td width="25" align="center">
			 <?php
                echo CHtml::image(Yii::app()->baseUrl."/assets/icon/icon-web.png");
            ?>
        	</td>
            <td>
    			<strong><span style="color:#fff; font-size:13px;">Đăng Nhập Hệ Thống</span></strong>
        	</td>
        </tr>
        </table>
    </div>
    <div class="center">
        <table cellpadding="3" cellspacing="0" width="100%" height="100%" border="0">
        <tr height="100%">
            <td valign="middle" align="center" width="220">
                <?php
                    echo CHtml::image(
						Yii::app()->baseUrl."/assets/images/open_key.png"
					);
                ?>
            </td>
            <td valign="top">
                <div class="form">
                <?php echo CHtml::beginForm(array($controller_id."/sign_in"),"post"); ?>
                <table width="100%" border="0" cellspacing="0" cellpadding="5">
                
					<?php
						echo "<tr style='height:60px;'>";
							echo "<td colspan='2' align='center'>";
						//$message = "mesage";
						if ( isset($message))
						{
							echo "<div style='height:15px; padding: 10px; border-top: #d00 1px solid; 
							font-size:12px;	border-bottom: #d00 1px solid; 
								background-color:#fee; color:#f00;'>";
								echo "<strong>$message</strong>" ;
							echo "</div>";	
						}
						echo "</td>";
							echo "</tr>";
						
                   ?>
                  <tr>
                    <td width="80">
                        <strong><span style="color:#fff; font-size:13px">Username</span></strong>
                    </td>
                    <td>
                        <?php
                            echo CHtml::textField("username","", array("style"=>"width:200px"));
                        ?>
                    </td>
                  </tr>
                  <tr>
                    <td><strong><span style="color:#fff; font-size:13px">Password</span></strong></td>
                    <td>
                        <?php
                            echo CHtml::passwordField("password","", array("style"=>"width:200px"));
                        ?>
                    </td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                    <td>
                        <?php
                          echo CHtml::submitButton("Đăng nhập", array("class"=>"btn_dangnhap")) ;
						  echo "&nbsp;&nbsp;";
						  //echo CHtml::resetButton("Xóa", array("class"=>"btn_dangnhap")) ;
                        ?>
                    </td>
                  </tr>
                </table>
    
                </div>
            </td>
        </tr>
        </table>
        <?php echo CHtml::endForm(); ?>
    </div>
    
</div><!-- end div container -->
</body>
</html>